<template>
  <div id="app">
    <top></top>
    <center></center>
    <font></font>
  
    <login v-show="displayLogin"></login>
    <regist v-show="displayRegist"></regist>
  </div>
</template>

<script>
import top from './component/app/app-top.vue'
import font from './component/app/app-font.vue'
import center from './component/app/app-center.vue'
import login from './component/app/app-login.vue'
import regist from './component/app/app-regist.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      displayLogin:false,
      displayRegist:false
    }
  },
  components:{ top, font, center, login, regist },
  mounted(){
  },
  methods:{
    openLogin(){
      this.displayRegist = false
      this.displayLogin = true
    },
    closeLogin(){
      this.displayLogin = false
    },
    openRegist(){
      this.displayLogin = false
      this.displayRegist = true
    },
    closeRegist(){
      this.displayRegist = false
    }
  }
  
}
</script>

<style>
body{
  margin: 0;
  padding: 0;
}
#app{
  overflow: hidden;
  position:relative;
}
</style>
